import {
  Button,
  Card,
  Form,
  Input,
  InputNumber,
  Radio,
  Select,
  Space,
} from "antd";
import { CloseOutlined } from "@ant-design/icons";
import type { FormProps } from "antd";

const DynamicForm = () => {
  const [form] = Form.useForm();
  const onFinish: FormProps["onFinish"] = (values) => {
    console.log(values);
  };
  const onReset = () => {
    form.resetFields();
  };

  return (
    <Form
      name="dynamic_form_item"
      form={form}
      onFinish={onFinish}
      autoComplete="off"
      initialValues={{ questions: [{}] }}
    >
      <Form.Item
        label="试卷标题"
        name="title"
        rules={[{ required: true, message: "请输入试卷标题" }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="试卷总分"
        name="total"
        rules={[{ required: true, message: "请输入试卷总分" }]}
      >
        <InputNumber />
      </Form.Item>
      <Form.List name="questions">
        {(fields, { add, remove }) => (
          <>
            {fields.map(({ name, key }) => (
              <Card
                title={`题目${name + 1}`}
                key={key}
                extra={
                  <Button
                    type="link"
                    danger
                    icon={<CloseOutlined />}
                    onClick={() => remove(name)}
                  />
                }
              >
                <Form.Item
                  label="题目类型"
                  name={[name, "type"]}
                  rules={[{ required: true, message: "请选择题目类型" }]}
                >
                  <Select
                    options={[
                      { label: "单选题", value: "single" },
                      {
                        label: "多选题",
                        value: "multiple",
                      },
                    ]}
                  />
                </Form.Item>
                <Form.Item
                  label="题目内容"
                  name={[name, "title"]}
                  rules={[{ required: true, message: "请输入题目内容" }]}
                >
                  <Input />
                </Form.Item>
                <Form.Item
                  label="题目分值"
                  name={[name, "score"]}
                  rules={[{ required: true, message: "请输入题目分值" }]}
                >
                  <InputNumber />
                </Form.Item>
                <Form.List name={[name, "options"]}>
                  {(subFields, { add, remove }) => (
                    <>
                      {subFields.map(({ name, key }) => (
                        <Space key={key}>
                          <Form.Item
                            label="选项编号"
                            name={[name, "label"]}
                            rules={[
                              { required: true, message: "请输入选项编号" },
                            ]}
                          >
                            <Input />
                          </Form.Item>
                          <Form.Item
                            label="选项内容"
                            name={[name, "value"]}
                            rules={[
                              { required: true, message: "请输入选项内容" },
                            ]}
                          >
                            <Input />
                          </Form.Item>
                          <Button
                            type="link"
                            danger
                            icon={<CloseOutlined />}
                            onClick={() => remove(name)}
                          />
                        </Space>
                      ))}
                      <Button type="dashed" onClick={() => add()}>
                        添加选项
                      </Button>
                    </>
                  )}
                </Form.List>
                <Form.Item
                  label="答案"
                  name={[name, "answer"]}
                  rules={[{ required: true, message: "请输入答案" }]}
                >
                  <Radio.Group
                    options={[
                      { label: "A", value: "a" },
                      { label: "B", value: "b" },
                    ]}
                  />
                </Form.Item>
              </Card>
            ))}
            <Button type="dashed" onClick={() => add()}>
              添加题目
            </Button>
          </>
        )}
      </Form.List>
      <Form.Item>
        <Space>
          <Button type="primary" htmlType="submit">
            保存试卷
          </Button>
          <Button htmlType="button" onClick={onReset}>
            重置试卷
          </Button>
        </Space>
      </Form.Item>
    </Form>
  );
};

export default DynamicForm;
